<%@page import="search.transcoord.TransCoordLoader"%>
<%@page import="search.local.LocalItem"%>
<%@page import="java.util.ArrayList"%>
<%@page import="search.local.LocalLoader"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true"%>
<%
	String stlocal = request.getParameter("stlocal");
	String enlocal = request.getParameter("enlocal");
	
	String keyword = null;
	int flag = 0;

	/** 선택사항이 제한적인 경우,
		범위를 벗어난 값에는 기본값을 강제로 줄 수 있다. */
	if (stlocal == null) {
		if (enlocal == null) {
	out.print("<script type='text/javascript'>alert('파라미터가 없습니다.');history.back();</script>");
	return;
		} else {
	enlocal = new String(enlocal.getBytes("ISO-8859-1"),
			"UTF-8");
	flag = 2;
	keyword = enlocal;
		}
	} else {
		stlocal = new String(stlocal.getBytes("ISO-8859-1"), "UTF-8");
		flag = 1;
		keyword = stlocal;
	}

	LocalLoader loader = new LocalLoader();
	ArrayList<LocalItem> list = loader.getLocalList(keyword);
%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>여기에 제목을 입력하세요.</title>

<!-- 모바일 웹 페이지 설정 -->
<link rel="shortcut icon" href="assets/ico/favicon.png" />
<link rel="apple-touch-icon-precomposed"
	href="assets/ico/apple-touch-icon-57-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72"
	href="assets/ico/apple-touch-icon-72-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114"
	href="assets/ico/apple-touch-icon-114-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144"
	href="assets/ico/apple-touch-icon-144-precomposed.png" />

<!-- bootstrap -->
<link rel="stylesheet" type="text/css"
	href="assets/css/bootstrap.min.css" />
<!-- 나눔고딕 웹 폰트 적용 -->
<link rel="stylesheet" type="text/css" href="assets/css/nanumfont.css" />
<link rel="stylesheet" type="text/css"
	href="assets/font-awesome-4.0.3/css/font-awesome.min.css" />

<!-- 반응형 웹을 지원하지 않을 경우 -->
<!-- <link rel="stylesheet" href="assets/css/non-responsive.css" /> -->

<!-- IE8 이하 버전 지원 -->
<!--[if lt IE 9]>
		<script type="text/javascript" src="assets/js/html5shiv.js"></script>
		<script type="text/javascript" src="assets/js/respond.min.js"></script>
		<![endif]-->

<!-- IE10 반응형 웹 버그 보완 -->
<!--[if gt IE 9]>
		<link rel="stylesheet" type="text/css" href="assets/css/ie10.css" />
		<script type="text/javascript" src="assets/js/ie10.js"></script>
		<![endif]-->
<style type="text/css">
body {
	padding-top: 50px;
}

nav.navbar {
	line-height: 50px;
}

.navbar span {
	color: #FFFFFF;
	font-size: 16px;
}

.nav_btns {
	width: 50px;
}

.list-case {
	background-color: #F8F8F8;
}

.thumbnail {
	float: left;
	width: 100px;
	height: 100px;
}

.list-case {
	display: block;
	background: #D9EDF7;
	width: 100%;
	height: 100px;
}

.list {
	width: 100%;
	line-height: 33px;
	text-align: left;
	padding-left: 105px;
}

.fa-position {
	float: right;
	margin-top: 10px;
	margin-right: 5px;
}

.list-btn2 {
	float: right;
	margin-right: 5px;
}

.list-btn1 {
	margin-left: 5px;
}

body {
	cursor: default;
}

.panel-title>a {
	text-decoration: none;
}

/** 배경 레이어의 위치, 크기, 투명도 지정 > 기본적으로 표시되지 않도록 설정 */
div#glayLayer {
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	background: black;
	filter: alpha(opacity = 60);
	opacity: 0.60;
}

/** 이미지가 표현될 레이어를 화면 중앙에 배치 > 기본적으로 표시되지 않도록 설정 */
#overLayer {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	margin-top: -175px;
	margin-left: -140px;
}
</style>
</head>

<body onload="init();">
	<!-- 상단 해더 바 -->
	<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
		<div class="container text-center">
			<div class="pull-left">
				<button class="btn btn-info nav_btns" onclick="history.back();">
					<i class="fa fa-arrow-left"></i>
				</button>
			</div>
			<span>검색결과</span>
		</div>
	</nav>

	<div id='glayLayer'></div>
	<div id='overLayer'></div>

	<div class="container">
		<%
			// 검색결과가 있을 경우에만 출력
			if (list != null) {
				if (!keyword.equals("")) {
		%>
		<div class="panel-group">
			<!-- 내용에 대한 출력 -->
			<%
				if (list.size() < 1) {
								out.println("<p>검색된 이미지가 없습니다.</p>");
							} else {
								for (int i = 0; i < list.size(); i++) {
									LocalItem item = list.get(i);
									TransCoordLoader tloader = new TransCoordLoader();
			%>
			<form class="form-signin" method="post" action="index.jsp">
				<div class="list-case">
					<span class="thumbnail" id="thumbnail<%=i%>"><img
						src="http://openapi.naver.com/map/getStaticMap?version=1.0&crs=EPSG:4326&center=<%=tloader.getReverseTransCoord(item.getMapx(),
							item.getMapy())%>&level=10&w=100&h=100&maptype=default&markers=<%=tloader.getReverseTransCoord(item.getMapx(),
							item.getMapy())%>&key=8a2d17c98fec8873eb768735df4bcf58&uri=blog.naver.com/crimwax"></span>
					<div class="list">
						<i class="fa fa-truck"></i>
						<%=item.getTitle()%>
						<i class="fa fa-star-o fa-position"></i>
					</div>
					<div class="list">
						<%=item.getAddress()%>
					</div>
					<div class="list">
						<i class="fa fa-caret-square-o-down fa-position"></i>
					</div>
				</div>
				<div class="list-sub">
					<input type="hidden" value="<%=item.getTitle()%>">
					<input type="hidden" value="<%=item.getAddress()%>">
					<button id="<%=i%>" class="list-btn1 btn btn-primary" value="<%=tloader.getTransCoord(item.getMapx(), item.getMapy())%>">북마크</button>
					<button class="list-btn1 btn btn-primary map"
						value='http://openapi.naver.com/map/getStaticMap?version=1.0&crs=EPSG:4326&center=<%=tloader.getReverseTransCoord(item.getMapx(),
						item.getMapy())%>&level=10&w=280&h=400&maptype=default&markers=<%=tloader.getReverseTransCoord(item.getMapx(),
						item.getMapy())%>&key=8a2d17c98fec8873eb768735df4bcf58&uri=blog.naver.com/crimwax'>지도보기</button>
					<button class="list-btn2 btn btn-primary" type="submit" onclick="sessionStorage['<% if (flag == 1) { %>sl<% } else if (flag == 2) { %>el<% } %>']='<%=item.getTitle()%>'; sessionStorage['<% if (flag == 1) { %>sg<% } else if (flag == 2) { %>eg<% } %>']='<%=tloader.getTransCoord(item.getMapx(),item.getMapy())%>';">
						<%
							if (flag == 1) {
						%>출발지로<%
							} else if (flag == 2) {
						%>도착지로<%
							}
						%>
					</button>
				</div>
			</form>
			<%
				}
							}
						}
			%>
		</div>
		<%
			} // end if (list != null)
		%>
	</div>

	<!-- Javascript -->
	<script src="assets/js/jquery.js"></script>
	<script src="assets/js/bootstrap.min.js"></script>
	<script src="assets/js/db.js"></script>
	<script src="assets/js/search_result.js"></script>
	<script type="text/javascript">
		$(function() {
			// 링크를 클릭한 경우
			$('.map').click(function() {
				// 배경 레이어를 화면에 표시한다.
				$("#glayLayer").fadeIn(300);

				// 이미지 레어를 화면에 표시한다.
				$("#overLayer").fadeIn(200);

				// 링크가 갖는 href 속성의 주소를 <img>태그에 설정하여 이미지 레이어에 출력
				$("#overLayer").html("<img src='" + $(this).val() + "' />");

				// 링크의 페이지 이동 중단.
				return false;
			});

			// (화면에 표시된) 배경 레이어를 클릭한 경우
			$("#glayLayer").click(function() {
				// 배경 레이어의 숨김
				$(this).fadeOut(300);

				// 이미지 레이어의 숨김
				$("#overLayer").fadeOut(200);
			});
		});
	</script>
</body>
</html>